import '../../css/base.css';
import './css/explore.css';
let liList = document.querySelectorAll('.main-bottom>ul>li');

function full() {
  // 设定每个元素间隙
  let space = 10;
  // 页面宽度
  const pWidth = window.innerWidth;
  // 一列的宽度
  const liWidth = liList[0].offsetWidth + space;
  // 列数
  let cols = Math.floor(pWidth / liWidth);
  // 创建一个数组存储成员的高度
  let heightArr = new Array(cols).fill(0);

  // 遍历所有元素，比较他们的高度，设置最小高度
  liList.forEach((el) => {
    // 获取元素真实高度
    const h = el.offsetHeight;
    // 获取最小高度(拿当前遍历的元素高度比较)
    // const minH = Math.floor(...heightArr)
    // toSorted 新数组排序方法，和sort功能一致，区别是不会修改原数组
    const minH = heightArr.toSorted((a, b) => a - b)[0];

    // 把最小高度的值重置(拿当前元素的高度 + 最小值的高度)
    // 获取最小值的下标
    const minIndex = heightArr.indexOf(minH);
    // 修改元素的位置
    el.style.cssText = `position: absolute;
            top: ${minH}px;
            left: ${liWidth * minIndex}px;`; // 一次性写入样式

    // 修改最小高度的值(累加)
    heightArr[minIndex] += h + space;
  });
}
window.addEventListener('load', full);
window.addEventListener('resize', full);
